@extends('layouts.admin')
@push('morecss')
    <link href="//cdn.tudouyu.cn/AdminInspinia/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css"
          rel="stylesheet">
    <style>
        .hand{
            cursor:pointer;
        }
    </style>
@endpush

@push('morescript')
    <script type="application/javascript">
        let page_params = {
            @can('admin.wxmasscomment.index')
            url_article_list: '{{ route('admin.wxmasscomment.index') }}',
            @endcan
            @can('admin.wxmasscomment.comment')
            url_comment_list: '{{ route('admin.wxmasscomment.comment') }}',
            @endcan
            @can('admin.wxmasscomment.open')
            url_open : '{{ route('admin.wxmasscomment.open') }}',
            @endcan
            @can('admin.wxmasscomment.markelect')
            url_markelect : '{{ route('admin.wxmasscomment.markelect') }}',
            @endcan
            @can('admin.wxmasscomment.delete')
            url_delete : '{{ route('admin.wxmasscomment.delete') }}',
            @endcan
            @can('admin.wxmasscomment.replyadd')
            url_replyadd : '{{ route('admin.wxmasscomment.replyadd') }}',
            @endcan
            @can('admin.wxmasscomment.replydelete')
            url_replydelete : '{{ route('admin.wxmasscomment.replydelete') }}',
            @endcan
        }
    </script>
    <!-- require page js -->
    <script src="{{ mix('js/admin/wxmasscomment_index.js') }}"></script>
@endpush
@section('content')
    <div class="fh-breadcrumb">
        <div class="ibox-content m-b-sm border-bottom">
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="control-label" for="keyword">关键字</label>
                        <input type="text" id="keyword" name="keyword" v-model="articleSearchParams.keyword" placeholder="请输入搜索关键字"
                               class="form-control">
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <label class="control-label" for="product_name">&nbsp;&nbsp;</label>
                        <div>
                            <button class="btn btn-primary" type="button" v-on:click="queryArticle"><i class="fa fa-search"></i>
                                搜索
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="fh-column">
            <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 100%;">
                <div class="full-height-scroll" style="overflow: hidden; width: auto; height: 100%;">
                    <ul class="list-group elements-list">
                        <li class="list-group-item hand" v-for="(article, index) in article_list" v-on:click="setCurArticle(index)" v-bind:class="[article.id == cur_article.id ? 'active' : '']">
                            <small class="pull-right text-muted">@{{ article.mass.push_time }}</small>
                            <strong>@{{ article.mass.title }}</strong>
                            <div class="small m-t-xs">
                                <p>
                                    文章标题:@{{ article.title }}
                                </p>
                                <p class="m-b-none">
                                    <div class="checkbox checkbox-primary">
                                        <input id="checkbox2" type="checkbox" v-show="page_params.url_open" v-model="article.open_comment" v-on:change="open(index)">
                                        <label for="checkbox2">
                                            <span class="label" v-bind:class="[article.open_comment == 1 ? 'label-primary' : 'label-warning']">@{{ article.open_comment == 1 ? '已开启' : '留言未开启' }}</span>
                                        </label>
                                    </div>

                                </p>
                            </div>
                        </li>
                    </ul>
                    <div class="list-group text-center">
                        <pagination :pagination="articlePagination" :callback="queryArticle" :options="paginationOptions"></pagination>
                    </div>
                </div>
                <div class="slimScrollBar" style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 36.6985px;">

                </div>
                <div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;">

                </div>
            </div>
        </div>

        <div class="full-height">
            <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 100%;">
                <div class="full-height-scroll white-bg border-left"
                     style="overflow: hidden; width: auto; height: 100%;">
                    <div class="element-detail-box">

                        <div class="tab-content">
                            <div class="ibox float-e-margins">
                                <div class="row">
                                    <div class="col-sm-2">
                                        <div class="form-group">
                                            <label class="control-label" for="time_range">时间范围</label>
                                            <select class="form-control" name="time_range" id="time_range" v-model="commentSearchParams.time_range">
                                                <option value="none">不限时间</option>
                                                <option value="last_five_days">最近五天</option>
                                                <option value="today">今天</option>
                                                <option value="yesterday">昨天</option>
                                                <option value="before_yesterday">前天</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-group">
                                            <label class="control-label" for="around_comment_type">评论类型</label>
                                            <select class="form-control" name="around_comment_type" id="around_comment_type" v-model="commentSearchParams.around_comment_type">
                                                <option value="0">所有</option>
                                                <option value="1">普通评论</option>
                                                <option value="2">精选评论</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <label class="control-label" for="keyword">关键字</label>
                                            <input type="text" id="keyword" name="keyword" value="" placeholder="请输入搜索关键字" v-model="commentSearchParams.keyword" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-group">
                                            <label class="control-label" for="product_name">&nbsp;&nbsp;</label>
                                            <div>
                                                <button class="btn btn-primary" type="button" v-on:click="queryComment"><i class="fa fa-search"></i>
                                                    搜索
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ibox-content">
                                    <div>
                                        <div class="feed-activity-list">
                                            <div class="social-feed-box" v-for="(comment, index ) in comment_list">
                                                <div class="pull-right social-action dropdown">
                                                </div>
                                                <div class="social-avatar">
                                                    <a href="javascript:void(0);" class="pull-left">
                                                        <img alt="image" class="img-circle" :src="comment.user.headimgurl" v-show="comment.user">
                                                    </a>
                                                    <div class="media-body">
                                                        <a href="javascript:void(0);" v-show="comment.user">
                                                            @{{ comment.user.nickname }}
                                                        </a>
                                                        <small class="text-muted">@{{ comment.around_create_time }}</small>
                                                    </div>
                                                </div>
                                                <div class="social-body">
                                                    <div class="row">
                                                        <p>
                                                            @{{ comment.around_content }}
                                                        </p>
                                                    </div>
                                                    <div class="row" style="padding-right: 10px;">
                                                        <div class="btn-group pull-right">
                                                            <button class="btn btn-xs" v-on:click="markelect(index)" v-bind:class="[comment.around_comment_type == 1 ? 'btn-warning' : 'btn-white']"><i class="fa fa-star"></i> 精选</button>
                                                            <button class="btn btn-danger btn-xs" v-on:click="deleteComment(index)" v-show="page_params.url_delete"><i class="fa fa-trash"></i> 删除</button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="social-footer">

                                                    <div class="social-comment" v-show="comment.reply_create_time">
                                                        <div class="media-body">
                                                           @{{ comment.reply_content }}
                                                        </div>
                                                        <div class="row" style="padding-right: 10px;">
                                                            <div class="btn-group pull-right">
                                                                <button class="btn btn-danger btn-xs" v-show="page_params.url_replydelete" v-on:click="replyDelete(index)"><i class="fa fa-trash"></i> 删除</button>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="social-comment" v-show="!comment.reply_create_time">
                                                        <div class="media-body">
                                                            <textarea class="form-control" placeholder="请填写回复内容" v-model="comment.reply_content"></textarea>
                                                            <div class="pull-right" style="margin-top: 5px;">
                                                                <button class="btn btn-xs btn-primary" v-show="page_params.url_replyadd" v-on:click="replyAdd(index)"><i class="fa fa-reply"></i> 提交</button>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>

                                            </div>
                                        </div>
                                        <div class="row text-center">
                                            <pagination :pagination="commentPagination" :callback="queryComment" :options="paginationOptions"></pagination>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="slimScrollBar"
                     style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 80px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 45.7604px;"></div>
                <div class="slimScrollRail"
                     style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div>
            </div>
        </div>


    </div>
@endsection